<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>羊羊能量豆</title>
    <meta name="description" content="本游戏设置了多个关卡。">
    <meta name="keywords" content="羊羊能量豆">
    <link rel="shortcut icon" href="favicong.png">
    <style>
        html {
            color: #000;
            background: #FFF;
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        fieldset, img {
            border: 0;
        }
        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal;
        }
        ol, ul {
            list-style: none;
        }
        caption, th {
            text-align: left;
        }
        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal;
        }
        q:before, q:after {
            content: '';
        }
        abbr, acronym {
            border: 0;
            font-variant: normal;
        }
        sup {
            vertical-align: text-top;
        }
        sub {
            vertical-align: text-bottom;
        }
        input, textarea, select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
        }
        legend {
            color: #000;
        }
        .wrapper {
            width: 960px;
            margin: 0 auto;
            color: #999;
        }
        canvas {
            display: block;
            background: #000;
        }
        .mod-game .info {
            padding: 10px 0;
            margin-bottom: 5px;
            line-height: 20px;
            text-align: center;
            color: #666;
        }
        .mod-game .info p {
            line-height: 20px;
            font-size: 14px;
            color: #666;
        }
        .mod-game .intro {
            padding: 10px 15px;
            background: #f8f8f8;
            border-radius: 5px;
        }
        .mod-game .intro p {
            line-height: 22px;
            text-indent: 2em;
            font-size: 14px;
            color: #666;
        }
        .mod-button {
            height: 32px;
            padding: 15px 0;
            text-align: center;
        }
        .mod-button span, .mod-button a {
            vertical-align: middle;
        }
        .mod-button .btn {
            display: inline-block;
            padding: 0 12px;
            line-height: 26px;
            color: #24292f;
            border: 1px solid #dddede;
            text-decoration: none;
            font-size: 13px;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="mod-game">
            <canvas id="canvas" width="960" height="640">不支持画布</canvas>
            <div class="info">
                <p>按 [空格键] 暂停或继续</p>
            </div>
            <div class="intro">
                <!-- 此游戏是在吃豆人的基础上加以改进，使用js对游戏进行编写 -->
            </div>
        </div>
    </div>
     <!-- 音频元素 -->
     <audio id="bgMusic" loop>
        <source src="./music.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>

    <script>
        // 获取音频元素
        var audio = document.getElementById('bgMusic');

        // 游戏开始时播放音乐
        function startGame() {
            audio.play();
        }

        // 游戏暂停时暂停音乐
        function pauseGame() {
            audio.pause();
        }

        // 游戏结束时停止音乐
        function endGame() {
            audio.pause();
            audio.currentTime = 0; // 重置音乐
        }

        // 监听空格键事件
        document.addEventListener('keydown', function(event) {
            if (event.code === 'Space') {
                if (audio.paused) {
                    startGame();
                } else {
                    pauseGame();
                }
            }
        });

        // 游戏开始时自动播放音乐
        startGame();
    </script>

    <script src="game.js"></script>
    <script src="index.js"></script>
</body>
</html>
